<template>
  <FormBuilder> </FormBuilder>

  <a-button @click="onSubmit">提交</a-button>
</template>

<script setup lang="ts">
import { useFormBuilder } from "./hooks/useFormBuilder"
import { computed, ref } from "vue"

const formData = ref({
  name: undefined,
  age: undefined,
})

const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
}

setTimeout(() => {
  console.log(formData)
}, 1000)

const formItems = computed(() => [
  {
    label: "姓名",
    key: "name",
    placeholder: "姓名",
    span: 12,
  },
  {
    label: "年龄",
    key: "age",
    type: "number",

    placeholder: "年龄",
    // onClick() {
    //   console.log("年龄点击")
    // },
    // onInput(value: string) {
    //   console.log("输入-年龄 ", value)
    // },
    span: 12,
  },
  {
    label: "性别",
    key: "sex",
    type: "select",
    hidden: formData.value.name === "张三",
    placeholder: "性别",
    options: [
      { label: "男", value: 1 },
      { label: "女", value: 2 },
    ],
  },
])

const { FormBuilder, validate } = useFormBuilder({
  rules,
  formItems,
  modelValue: formData,
})

async function onSubmit() {
  await validate()
  console.log("校验成功！~")
}
</script>
